<template>
  <!-- 搜索组件 -->
  <van-search
    v-model="keyword"
    shape="round"
    background="#4fc08d"
    placeholder="请输入搜索关键词"
    @search="search"
  />
  <!-- 轮播图组件 -->
  <van-swipe :autoplay="3000" lazy-render>
    <van-swipe-item
      v-for="(image, index) in images"
      :key="image"
      @click="swipeClick(index)"
    >
      <img :src="image" class="img" />
    </van-swipe-item>
  </van-swipe>
  <!-- 通知组件 -->
  <van-notice-bar left-icon="volume-o" :text="noticeText" />
  <!-- 单元格组件 -->
  <van-cell
    title="热卖商品"
    icon="hot-o"
    color="#ee0a24"
    is-link
    value="更多"
    @click="hotClick"
  />

  <!-- 宫格组件 -->
  <van-grid square :column-num="3" icon-size="80px">
    <van-grid-item
      v-for="product in products"
      :key="product.id"
      :icon="product.img"
      :text="product.name"
      :to="{ name: 'product-detail', query: { id: product.id } }"
    />
  </van-grid>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive } from "vue";
import { productApi } from "@/api/index";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
//搜索关键字
const keyword = ref("");
//轮播图图片
const images = ref([
  "https://m.360buyimg.com/babel/jfs/t1/86084/10/34332/82362/63a55213Ee164b022/d0a29f29c66e168c.jpg",
  "https://m.360buyimg.com/babel/jfs/t1/208703/35/29180/107808/63b3c313F134a24d5/5ab158c7ff058030.jpg",
]);
//通知文本信息
const noticeText = ref("欢迎使用家家鲜购物商城,新用户注册送100元优惠券。");
//商品信息
const products = ref([]);
//钩子函数
onMounted(() => {
  getProduct();
});

//搜索
const search = (value: string) => {
  console.log(value);
  router.push({name:"product-list",query:{name:value}})
};

//点击轮播图
const swipeClick = (index: any) => {
  console.log(index);
};

//查询商品信息Api
const getProduct = () => {
  productApi.selectPage
    .call({ pageSize: 9, currentPage: 1 })
    .then((res: any) => {
      products.value = res.records;
    });
};

//点击更多热卖商品
const hotClick = () => {
  console.log("您点击了热卖商品");
};
</script>


<style>
.img {
  width: 100%;
  height: 160px;
}
</style>